<template>
  <div class="login">
    <el-row>
      <!-- row是行，col是列；共计24份，这个列占了12份，向右偏移6份，所以右侧还有6份，因此居中 -->
      <el-col :span="12" :offset="6">
        <!-- model 是表单对应的数据 -->
        <!-- rules 是校验规则 -->
        <!-- ref 是选择器，用来操作dom，不常用 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm login-form"
        >
          <!-- prop 校验的字段，和rules对应 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登陆</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单对应的数据
      ruleForm: {
        username: "",
        password: ""
      },
      // 校验规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },// 必填
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },// 必填
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
        console.log(formName);
        // 先校验后提交
        // $refs---选择元素或者组件
        // this.$refs[formName] 等效于 this.$refs.ruleForm.可以选择el-form这个组件
        // validate是子组件中的函数，通过ref选择子组件，然后就可以使用子组件中的属性和方法
      this.$refs[formName].validate((valid) => {
        if (valid) { // valid 是校验结果
          alert("submit!"); // http
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #56a5f1;
}
.login-form {
  margin-top: 60px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
</style>